<template>
    <div class="payType">
        <div class="item" v-for="dt in channel" :key="dt.payType" @click="createPayorder(dt.payType)">
            <img :src="'/images/'+dt.payType+'.png'"/>
        </div>
        <!-- <div class="item" @click="createPayorder('ali')"><img src="/images/pay2.png"/></div> -->
    </div>
    <my-dailog v-model:show="showPayCode">
        <div class="dgMainBox" v-if="payStatus==1">
            <div class="title">支付成功</div>
            <div class="sctxt">
                已完成支付！
            </div>
            <div class="btnBox">
                <div class="myBtn solid" @click="closePop">确定</div>
            </div>
        </div>
        <div class="dgMainBox" v-else>
            <div class="title">请使用{{type=='wx'?'微信':'支付宝'}}扫码支付</div>
            <div class="code">
                <img :src="payewm"/>
            </div>
            <div class="btnBox">
                <div class="myBtn" @click="closePop">取消支付</div>
                <div class="myBtn solid" @click="closePop">完成支付</div>
            </div>
        </div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,onMounted,onBeforeUnmount} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import myDailog from '@/components/myDailog.vue'
export default {
    props:['options'],
    components:{
        myDailog
    },
    setup(props,context) {
        const store = useStore()
        const router = useRouter(), route = useRoute();

        const state = reactive({
            type:'',
            showPayCode:false,
            payewm:'',
            channel:[],
            payStatus:0, // 支付状态，0未支付，1已支付,
            cancelSearchPayStatus:false, // 取消查询支付状态
            paymentTypeId:'' // 缴费类型id
        })
        
        onMounted(()=>{
            state.paymentTypeId = sessionStorage.getItem('paymenttypeid')
            const houseInfo = JSON.parse(sessionStorage.getItem('selectinfo'))
            store.dispatch('get_pay_channel',{
                communityId:houseInfo.xqDataItem.id,
            }).then(res =>{
                res.success && (state.channel = res.data)
            })
        })

        onBeforeUnmount(()=>{  // 销毁组件
            state.cancelSearchPayStatus = true
            console.log('取消了支付状态查询')
        })

        const createPayorder = async (type)=>{
            console.log("options",props.options)
            if(!props.options.money){
               return alert('请输入缴费金额')
            }
            const houseInfo = props.options.houseInfo || JSON.parse(sessionStorage.getItem('selectinfo'))
            const res = await store.dispatch('create_pay_order',{
                communityId:houseInfo.xqDataItem.id,
                payType:type,
                paymentSettingId:houseInfo.fangjianItem.paymentSettingId || null,
                paymentTypeId:state.paymentTypeId,
                phone:houseInfo.fangjianItem.phone,
                price:props.options.money,
                roomId:houseInfo.fangjianItem.id
            })
            if(res.success){
                //state.orderNo = res.data
                if(type=='wx'){ // 微信
                    const res2 = await store.dispatch('get_wx_pay_codeimg',{
                        communityId:houseInfo.xqDataItem.id,
                        orderNum:res.data
                    })
                    if(res2){
                        let img = btoa(new Uint8Array(res2).reduce((data, byte) => data + String.fromCharCode(byte), ''));
                        state.payewm = 'data:image/png;base64,' +img;
                    }else{
                       return alert('获取支付二维码错误,请选择其他方式支付！')
                    }
                }else if(type=='ali'){
                    const res2 = await store.dispatch('get_ali_pay_codeimg',{
                        communityId:houseInfo.xqDataItem.id,
                        orderNum:res.data
                    })
                    if(res2){
                        let img = btoa(new Uint8Array(res2).reduce((data, byte) => data + String.fromCharCode(byte), ''));
                        state.payewm = 'data:image/png;base64,' +img;
                    }else{
                       return alert('获取支付二维码错误,请选择其他方式支付！')
                    }
                }
                searchPayStatus(res.data)  // 查询支付状态
                state.type = type
                state.showPayCode = true
            }else{
                alert(res.message)
            }
        }

        const searchPayStatus = async (orderNo) =>{
            if(state.cancelSearchPayStatus){
                return
            }
            const res = await store.dispatch('get_pay_status',{orderNum:orderNo})
            if(res.success){
                if(res.data.status==0){
                   setTimeout(()=>{ // 1秒钟查一次
                       searchPayStatus(orderNo)
                   },1000)  
                }else{
                    state.payStatus = 1
                }
            }
        }

        const closePop = ()=>{
            state.cancelSearchPayStatus = true
            state.showPayCode=false
            router.push('/pay/wy')
        }


        return{
            ...toRefs(state),
            createPayorder,
            closePop
        }
    },
}
</script>

<style lang="scss" scoped>
    .payType{
        display: inline-block;
        .item{
            display: inline-block;
            width: 280px;
            height: 115px;
            overflow: hidden;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
            }
            &+.item{
                margin: 0 0 0 30px;
            }
        }
    }
    .dgMainBox{
        width: 778px;
        height: 658px;
        background: #fff;
        border-radius:10px;
        overflow: hidden;
        .title{
            text-align: center;
            width: 100%;
            height: 165px;
            line-height: 165px;
            font-size: 50px;
            font-weight: 600;
            color: #fff;
            background: url(/images/dlbg.png) left top repeat-x;
        }
        .sctxt{
            font-size: 50px;
            text-align: center;
            padding: 132px 0 80px 0;
        }
        .code{
            width: 267px;
            height: 267px;
            background: #549dfe;
            border-radius: 6px;
            overflow: hidden;
            padding: 9px;
            margin: 0 auto;
            margin-top: 45px;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .btnBox{
            padding: 52px 0 0 0;
            text-align: center;
        }
        .myBtn{
            display: inline-block;
            width: 300px;
            height: 80px;
            line-height: 76px;
            border: 2px solid #549dfe;
            border-radius: 10px;
            text-align: center;
            font-size: 30px;
            color: #549dfe;
            cursor: pointer;
            &+.myBtn{
                margin-left: 25px;
            }
            &.solid{
                background: #549dfe;
                color: #fff;
            }
        }
    }
</style>